/**
 * Created by sunguodong on 2021/12/31.
 * Email: sungd@tongtech.com
 * Description: ArGIS 地图中的应用方法
*/

import './index.less';
import React, {useEffect} from "react";
import { Button } from "antd";
import * as esriLoader from 'esri-loader';
import icon from "../../image/gis_5g_station_normal.svg";
import { anyTypeAnnotation } from '@babel/types';
const options = {   
    url: 'https://js.arcgis.com/3.39/',
}
esriLoader.loadScript(options);


export const MapOverlaysEvent: React.FC = () => {
    var map: any;
    function componentDid() {

        esriLoader.loadModules([
            "esri/map",
            "esri/symbols/PictureMarkerSymbol",
            "esri/geometry/Point",
            "esri/SpatialReference",
            "esri/graphic",
            "esri/InfoTemplate",
            "esri/layers/ArcGISTiledMapServiceLayer", 
            "esri/layers/GraphicsLayer", 
            "dojo/_base/Color",
        ]).then(([Map, PictureMarkerSymbol, Point, SpatialReference, Graphic, InfoTemplate, ArcGISTiledMapServiceLayer, GraphicsLayer, Tiled, Color]) => {
            map = new Map('mapCon', {
                basemap: 'osm',
                center: [116.403414, 39.924091],
                zoom: 15
            });

            map.on("load",function () {
                var newPoint = new Point(116.403414, 39.924091);
                var picSymbol = new PictureMarkerSymbol(icon, 50, 50);
                var picGraphic = new Graphic(newPoint, picSymbol);
                // 弹窗
                var infoTemplate = new InfoTemplate();
                infoTemplate.setTitle("今天天气真晴朗");
                infoTemplate.setContent('<div>一颗绿油油的树</div>');
                picGraphic.setInfoTemplate(infoTemplate);
                map.graphics.add(picGraphic);
            });
        }).catch(err => {
            console.error(err)
        })
    }
    
    useEffect(() => {
        return componentDid();
    }, []);

    function componentWillUn() {}

    useEffect(() => () => {
        return componentWillUn();
    }, []);

    return (
        <div id="mapCon"></div>
    )
}
